<template>
  <div class="container">
    <div class="tyop"></div>
   <div class="tab-b">
      <div class="box-kai bor-l">
        <div class="icon share"></div>
        <div class="icon-text">
            <p class="title"> 分享专属二维码</p>
            好友购物有返现
        </div>
      </div>
      <div class="box-kai ">
        <div class="icon yongj"></div>
         <div class="icon-text">
            <p class="title"> 佣金提现</p>
             极速到账
        </div>
        </div>
   </div>
   <div class="box-t">
     <div class="cart-title">精彩好卷，每日领取</div>
   </div>
   <div class="cart-list">
       <div class="stamp stamp02" v-for="(cart,index) in cartlist" :key="index">
            <div class="par"><p>超值优惠卷</p><sub class="sign">￥</sub><span>{{cart.numberValue}}</span><sub>优惠券</sub><p>{{cart.name}}</p></div>
            <div class="copy">副券<p>{{cart.startDate.substr(0,10)}}<br>{{cart.createDateName.substr(0,10)}}</p></div>
            <div class="go">
              <div class="go-btn" @click="goGet(cart.id)">立即领取</div>
            </div>
            <i></i>
        </div>
   </div>
  </div>
</template>
<script>
export default {
  data () {
	    return {
        cartlist:[],
        }
     },
  mounted(){
   this.getcartList()
   },
  methods:{
   getcartList(){  ///admin/couponInfo/list优惠卷
      var self=this
      var data={
         pageNumber:1, 
         pageSize:10,
         param: {isHide:'0'}
      }
       this.$axios.post('/device/couponInfo/list',data).then((res) => {
             self.cartlist=res.data.data.list
             console.log(res)
       })
   },
   goGet(id){
     var self=this
       this.$axios.post('/device/couponUser/createer',{userId:this.$route.query.userId,couponId:id}).then((res) => {
             console.log(res)
             if(res.data.code=='1000'){
               this.$vux.toast.text('领取成功')
             }else{
               this.$vux.toast.text('您已经领取过了')
             }
       })
   }
  }
}
</script>

<style lang="less" scoped>
.cart-list{
  padding-top:20px;
}
.cart-title{
  width:80%;
  font-size: 20px;
  background:#ff1c4b;
  font-size: 34px;
  font-weight: 800;
  border-radius: 30px;
  line-height: 70px;
  text-align: center;
  margin:30px auto;
  color: #fff;
}
.tyop{
  height:400px;
  width:100%;
 background: url(../assets/top.png) no-repeat left top;
   background-size:100% 100%;
}
.container{
  min-height: 100%;
  width:100%;
 
}
.box-t{
 background: #f5f5f5;
     overflow: hidden;
}
.tab-b{
  display: flex;
  background: #fff;
  padding:20px;
}
.icon{
 margin-right:20px;
  width:60px;

}
.share{
   background: url(../assets/share.png) no-repeat center center;
   background-size: contain;
}
.yongj{
  background: url(../assets/yongjin.png) no-repeat center center;
   background-size: contain;
}
.box-kai{
  display: flex;
  flex: 1;
  font-size: 32px;
  text-align: left;
  padding:0 20px;
  .icon-text{
    flex:1;
    display: flex;
    flex-flow: column;
    .title{
      font-size: 24px;
      padding-top:10px;
      color: #8c8d8e;
    }
  }
}
.go{
  width:178px;
  display: flex;
  align-items: center;
  height: 200px;
  justify-content: center;
 border-left: 2px dashed rgba(255, 255, 255, 0.3);
  .go-btn{
    font-weight: 800;
    width:120px;
    background: #fff;
    line-height: 40px;
    border-radius: 30px;
    padding:4px 10px;
    font-size:26px;
    color: #fff;
    background: #ff9a25;
  }
}
.bor-l{
  border-right: 2px solid  #b7b3b3;
}
     .loerybox{
       width:200px;
       height:44px;
       margin:0 auto;
      
       padding-top:14px;
       justify-content: space-between;
       display: flex;
       .btn{
         height:44px;
         width:90px;
          box-sizing: border-box;
         line-height: 44px;
         text-align: center;
         color: #faf3d3;
         font-size: 22px;
         background: #efd421;
         border-radius: 16px;
       }
       .active{
         border:4px solid #fff;
         line-height: 36px;
         background: #f5a32c;
         color: #fff;
       }
     }
     .numbox{
       width:260x;
       height:80px;

     }
   .stamp {
    width: 700px;
    height: 200px;
    padding: 0 10px;
    position: relative;
    overflow: hidden;
    margin:10px auto;
       }
.stamp:before {content: '';position: absolute;top:0;bottom:0;left:10px;right:10px;z-index: -1;}
.stamp:after {content: '';position: absolute;left: 10px;top: 10px;right: 10px;bottom: 10px;box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.5);z-index: -2;}
.stamp i{position: absolute;
z-index: -1;
  left: 20%;top: 45px;height: 250px;width: 700px;
  background-color: rgba(255,255,255,.15);transform: rotate(-30deg);}
.stamp .par{
    float: left;
    padding: 26px 15px;
    width: 280px;border-right:2px dashed rgba(255,255,255,.3);text-align: left;}
.stamp .par p{
    color:#fff;
     font-size: 24px;
    }
.stamp .par span{font-size: 56px;color:#fff;margin-right: 5px;}
.stamp .par .sign{font-size: 34px;}
.stamp .par sub{position: relative;top:-5px;color:rgba(255,255,255,.8);}
.stamp .copy{float:left;padding:21px 14px;width:180px;vertical-align: text-bottom;font-size: 38px;color:rgb(255,255,255);}
.stamp .copy p{font-size: 26px;margin-top: 15px;}
.stamp02{
  // background: #D24161;
  // background: radial-gradient(transparent 0, transparent 5px, #D24161 5px);
  background-size: 15px 15px;background-position: 9px 3px;}
.stamp02:before{background-color:#D24161;}
</style>
